<template>
  <div class="title-box">
    <span>{{ myTitle }}</span>
    <span class="fenlei" @click="handleToShow">分类</span>
    <ul class="nav-box" v-show="isshow">
      <router-link
        v-for="item in navList"
        :to="item.link"
        :key="item.name"
        tag="li"
        >{{ item.name }}</router-link
      >
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        { name: "首页", link: "/home" },
        { name: "榜单", link: "/rank" },
        { name: "热点", link: "/hotSpot" },
        { name: "商场", link: "/about" },
      ],
    };
  },
  props: {
    myTitle: {
      type: String,
      default: "猫眼电影",
    },
    isshow: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleToShow(e) {
      this.$emit("changeShow");
      e.stopPropagation();
    },
  },
};
</script>

<style scoped lang='scss'>
.title-box {
  background-color: #e54847;
  line-height: 50px;
  color: #fff;
  height: 50px;
  font-size: 18px;
  .fenlei,
  .nav-box {
    position: absolute;
    right: 10px;
  }
  .nav-box {
    background-color: #fff;
    box-shadow: 2px 2px 10px 2px rgba(10, 20, 30, 0.5);
    color: #000;
    li {
      list-style: none;
      width: 100px;
      border-bottom: 1px solid #ccc;
    }
    li:last-child {
      border: none;
    }
  }
}
</style>
